<template>
  <div class="layout">
    <nav-bar></nav-bar>
    <div class="banner-wrapper">
      <div class="banner-container">
        <transition-group name="fade">
          <img 
            v-for="(banner, index) in banners" 
            :key="banner.id"
            v-show="currentBannerIndex === index"
            :src="banner.image" 
            :alt="banner.alt"
            class="banner-img"
          >
        </transition-group>
        <div class="banner-indicators">
          <span 
            v-for="(banner, index) in banners" 
            :key="banner.id"
            :class="{ active: currentBannerIndex === index }"
            @click="currentBannerIndex = index"
          ></span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <home-content></home-content>
    </div>
  </div>
</template>

<script>
import NavBar from './NavBar.vue'
import HomeContent from './HomeContent.vue'

export default {
  name: 'MainLayout',
  components: {
    NavBar,
    HomeContent
  },
  data() {
    return {
      banners: [
        { id: 1, image: require('@/assets/banners/banner1.jpg'), alt: '轮播图1' },
        { id: 2, image: require('@/assets/banners/banner2.jpg'), alt: '轮播图2' }
      ],
      currentBannerIndex: 0,
      bannerInterval: null
    }
  },
  methods: {
    startBannerRotation() {
      this.bannerInterval = setInterval(() => {
        this.currentBannerIndex = (this.currentBannerIndex + 1) % this.banners.length;
      }, 5000);
    },
    stopBannerRotation() {
      clearInterval(this.bannerInterval);
    }
  },
  mounted() {
    this.startBannerRotation();
  },
  beforeUnmount() {
    this.stopBannerRotation();
  }
}
</script>

<style scoped>
.banner-wrapper {
  width: 100%;
  margin-top: 60px;
  background-color: #f5f5f5;
  padding: 20px 0;
}

.banner-container {
  width: 75%;
  margin-left: 12%;
  margin-right: auto;
  border-radius: 8px;
  overflow: hidden;
  height: 400px;
  position: relative;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.banner-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

.banner-indicators span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.banner-indicators span.active {
  background-color: white;
  transform: scale(1.2);
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>